<template>
	<view class="charts">
		<f2 :init="initChart" :charts="chartCopyData" />
	</view>
</template>

<script>
	import f2 from "@/components/i-uni-f2/f2.vue";
	export default {
		name: "ChartLineArea",
		props: {
			chartData: Object,
		},
		data() {
			return {};
		},
		components: {
			f2,
		},
		computed: {
			chartCopyData() {
				return this.chartData.data;
			},
		},
		created() {},
		methods: {
			initChart(F2, config) {
				const chart = new F2.Chart(config);
				chart.source(this.chartData.data);
				chart.axis(this.chartData.x, {
					tickLine: {
						lineWidth: 1,
						stroke: "#555555",
						length: 5,
						alignTick: false,
					},
					line: {
						lineWidth: 1,
						stroke: "#555555",
						top: true, // 展示在最上层
					},
					label: {
						fill: "#555555",
					},
				});
				chart.axis(this.chartData.y, {
					grid: null,
					label: {
						fill: "#555555",
					},
				});
				chart
					.line()
					.shape("smooth")
					.position(this.chartData.x + "*" + this.chartData.y)
					.color(this.chartData.color);
				chart
					.area()
					.shape("smooth")
					.position(this.chartData.x + "*" + this.chartData.y)
					.color(this.chartData.color);
				chart.legend({
					custom: true,
					align: "center",
					wordSpace: 10,
					items: [{
						name: this.chartData.name,
						marker: (x, y, r, ctx) => {
							r = 4;
							ctx.lineWidth = 2;
							ctx.strokeStyle = this.chartData.color;
							ctx.moveTo(x - r - 8, y);
							ctx.lineTo(x - r - 2, y);
							ctx.stroke();
							ctx.moveTo(x + r, y);
							ctx.lineTo(x + r + 2, y);
							ctx.stroke();
							ctx.arc(x - 3, y, r, 0, Math.PI * 2, false);
							ctx.stroke();
						},
					}, ],
				});
				chart.tooltip({
					showTitle: true,
					background: {
						radius: 4,
						fill: "#fcfcfc",
						padding: [6, 10],
						shadowColor: "rgba(0, 0, 0, 0.2)",
						shadowBlur: 20,
					},
					titleStyle: {
						fontSize: 14,
						fill: "#555555",
						textAlign: "start",
						textBaseline: "top",
					},
					nameStyle: {
						fontSize: 14,
						fill: "#555555",
						textAlign: "start",
						textBaseline: "middle",
					},
					valueStyle: {
						fontSize: 14,
						fill: "#555555",
						textAlign: "start",
						textBaseline: "middle",
					},
					onShow: (obj) => {
						obj.items[0].name = this.chartData.name;
						obj.items[0].value += this.chartData.unit;
					},
				});
				chart
					.point()
					.position(this.chartData.x + "*" + this.chartData.y)
					.color(this.chartData.color)
					.style(this.chartData.y, {
						stroke: this.chartData.color,
						lineWidth: 2,
						fill: "#FFF",
						r: function r(val) {
							return 3;
						},
					});
				chart.scale(this.chartData.x, {
					tickCount: 5,
				});
				chart.render();
				return chart;
			},
		},
	};
</script>

<style scoped>
	.charts {
		width: 100%;
		height: 100%;
	}
</style>
